<template>
	<h2>子组件2</h2>
	count的值：{{count}}
	<button @click="add">点击加n</button>
	
	<h3>案例：用户注册</h3>
	<form @submit.prevent="formSubmit" >
		<div>用户名：<input type="text" v-model="formData.useranme" /></div>
		<div>密码：<input type="text" v-model="formData.password" /></div>
		<div>性别：<input type="radio" v-model="formData.gender" value="男" />男
		<input type="radio" v-model="formData.gender" value="女" />女
		</div>
		<input type="submit" value="注册"/>
	</form>
</template>

<script setup>
import { ref } from 'vue';

	// 1.在子组件中声明自定义事件，调用defineEmits()函数声明自定义事件
	const emit=defineEmits(['updateCount','demosumit'])
	
	//2.在子组件中触发自定义事件,直接定义方法来触发自定义事件
	const count=ref(0)
	const add=()=>{
		count.value++
		//第1个参数为字符串类型的自定义事件的名称，
		//第2个参数为需要传递的数据，当触发当前组件的事件时，该数据会传递给父组件。
		emit('updateCount',2)
	}
	
	//用户注册定义的变量
	const formData=ref({
		useranme:'',
		password:'',
		gender:''
	})
	//事件处理器
	const formSubmit=()=>{
		//使用emit()传递数据
		emit('demosumit',formData.value)
	}
	
</script>

<style scoped>
</style>